What is @wordpress/escape-html?
@wordpress/escape-html is a utility package for escaping HTML entities in strings. It helps prevent XSS (Cross-Site Scripting) attacks by converting special characters into their corresponding HTML entities.
What are @wordpress/escape-html's main functionalities?
Escape HTML
This feature allows you to escape HTML entities in a string, converting special characters like <, >, and & into their corresponding HTML entities.
const { escapeHTML } = require('@wordpress/escape-html');
const unsafeString = '<script>alert("XSS")</script>';
const safeString = escapeHTML(unsafeString);
console.log(safeString); // <script>alert("XSS")</script>
Escape Attribute
This feature allows you to escape HTML attributes, ensuring that special characters are converted to their corresponding HTML entities.
const { escapeAttribute } = require('@wordpress/escape-html');
const unsafeAttribute = '" onmouseover="alert(1)"';
const safeAttribute = escapeAttribute(unsafeAttribute);
console.log(safeAttribute); // " onmouseover="alert(1)"
Other packages similar to @wordpress/escape-html
he
The 'he' package is a robust HTML entity encoder/decoder. It supports both encoding and decoding of HTML entities and is highly configurable. Compared to @wordpress/escape-html, 'he' offers more flexibility and options for handling HTML entities.
html-escaper
The 'html-escaper' package provides simple functions to escape and unescape HTML entities. It is lightweight and easy to use, similar to @wordpress/escape-html, but with a focus on simplicity and minimalism.
lodash.escape
The 'lodash.escape' function is part of the Lodash library, which provides utility functions for common programming tasks. It escapes characters for inclusion in HTML, similar to @wordpress/escape-html, but is part of a larger utility library.
Escape HTML
Escape HTML utils.
Installation
Install the module
npm install @wordpress/escape-html
This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.
API
# escapeAmpersand
Returns a string with ampersands escaped. Note that this is an imperfect
implementation, where only ampersands which do not appear as a pattern of
named, decimal, or hexadecimal character references are escaped. Invalid
named references (i.e. ambiguous ampersand) are are still permitted.
Related
Parameters
- value
string
: Original string.
Returns
# escapeAttribute
Returns an escaped attribute value.
Related
Note we also escape the greater than symbol, as this is used by wptexturize to
split HTML strings. This is a WordPress specific fix
Note that if a resolution for Trac#45387 comes to fruition, it is no longer
necessary for __unstableEscapeGreaterThan
to be used.
See: https://core.trac.wordpress.org/ticket/45387
Parameters
- value
string
: Attribute value.
Returns
string
: Escaped attribute value.
# escapeEditableHTML
Returns an escaped Editable HTML element value. This is different from
escapeHTML
, because for editable HTML, ALL ampersands must be escaped in
order to render the content correctly on the page.
Parameters
- value
string
: Element value.
Returns
string
: Escaped HTML element value.
# escapeHTML
Returns an escaped HTML element value.
Related
Parameters
- value
string
: Element value.
Returns
string
: Escaped HTML element value.
# escapeLessThan
Returns a string with less-than sign replaced.
Parameters
- value
string
: Original string.
Returns
# escapeQuotationMark
Returns a string with quotation marks replaced.
Parameters
- value
string
: Original string.
Returns
# isValidAttributeName
Returns true if the given attribute name is valid, or false otherwise.
Parameters
- name
string
: Attribute name to test.
Returns
boolean
: Whether attribute is valid.